<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Calendar, Badge } from 'ant-design-vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';

const props = defineProps<{
  bookedDates?: string[];
  conflictDates?: string[];
  selectedDate?: string;
}>();

const emit = defineEmits(['select', 'update:selectedDate']);

const selectedValue = ref<Dayjs>(props.selectedDate ? dayjs(props.selectedDate) : dayjs());

const getDateStatus = (value: Dayjs) => {
  const dateStr = value.format('YYYY-MM-DD');
  const isBooked = props.bookedDates?.includes(dateStr);
  const isConflict = props.conflictDates?.includes(dateStr);
  
  if (isConflict) {
    return { status: 'error', text: '冲突' };
  }
  if (isBooked) {
    return { status: 'warning', text: '已预约' };
  }
  return null;
};

const disabledDate = (current: Dayjs) => {
  // 禁用过去的日期
  return current && current < dayjs().startOf('day');
};

const onSelect = (date: Dayjs) => {
  const dateStr = date.format('YYYY-MM-DD');
  
  // 检查是否冲突
  if (props.conflictDates?.includes(dateStr)) {
    return;
  }
  
  selectedValue.value = date;
  emit('select', dateStr);
  emit('update:selectedDate', dateStr);
};
</script>

<template>
  <div class="booking-calendar">
    <Calendar
      v-model:value="selectedValue"
      :fullscreen="false"
      @select="onSelect"
    >
      <template #dateCellRender="{ current }">
        <Badge 
          v-if="getDateStatus(current)"
          :status="getDateStatus(current)?.status as any"
          :text="getDateStatus(current)?.text"
        />
      </template>
    </Calendar>
    
    <div class="mt-4 flex items-center space-x-4 text-xs text-gray-600">
      <div class="flex items-center">
        <Badge status="success" />
        <span class="ml-1">可预约</span>
      </div>
      <div class="flex items-center">
        <Badge status="warning" />
        <span class="ml-1">已预约</span>
      </div>
      <div class="flex items-center">
        <Badge status="error" />
        <span class="ml-1">冲突</span>
      </div>
    </div>
  </div>
</template>

